var Message = function (container, params) {
  var s = this;
  s.container = $(container);
  var url = params.url;
  var updateUrl = params.updateUrl;

  // 消息中心弹窗
  var messageSource = '<div class="message-layout-wrap">'
    + '<div class="message-layout">'
    + '    <div class="message-layout-header">'
    + '           <div class="message-header-title">消息中心</div>'
    + '           <div class="message-header-close"></div>'
    + '       </div>'
    + '       <ul class="message-content">'
    + '          <% for (var i=0; i < messages.length; i++ ) { %>'
    + '               <% if (messages[i].isRead) { %>'
    + '                   <li class="read">'
    + '                         <%= messages[i].detail %>'
    + '                       <button class="message-more" data-id="<%= messages[i].caseId %>">点击查看</button>'
    + '                   </li>'
    + '               <% } else { %>'
    + '                     <li>'
    + '                         <%= messages[i].detail %>'
    + '                       <button class="message-more" data-id="<%= messages[i].caseId %>">点击查看</button>'
    + '                   </li>'
    + '               <% } %>'
    + '          <% } %>'
    + '       </ul>'
    + '       <% if( messages.length > 1 ){ %>'
    + '         <div class="more">查看更多<i class="icon-more"></i></div></div>'
    + '       <% } %>'
    + '</div>';

  // 消息详情
  var messageDetail = '<div class="message-detail-wrap">'
    + '<div class="message-detail">'
    + '<div class="message-detail-header">'
    + '   <div class="message-detail-title">消息详情</div>'
    + '   <div class="message-detail-content">'
    + '        <table cellspacing="0" cellpadding="0">'
    + '          <tr>'
    + '               <td width="35%">消息名称</td>'
    + '               <td width="65%"><%= item.caseName %></td>'
    + '           </tr>'
    + '           <tr>'
    + '              <td>消息</td>'
    + '              <td><%= item.detail %></td>'
    + '           </tr>'
    + '           <tr>'
    + '               <td>日期</td>'
    + '               <td><%= item.time %></td>'
    + '           </tr>'
    + '       </table>'
    + '   </div>'
    + '   <div class="message-detail-close">关闭</div>'
    + '</div>'
    + '</div>';

  // 消息列表
  var moreSource = '<div class="more-layout-wrap">'
    + '  <div class="more-layout">'
    + '      <div class="more-header">'
    + '          <div class="more-title">消息列表</div>'
    + '          <div class="more-close"></div>'
    + '      </div>'
    + '      <div class="pagination-nick">'
    + '      </div>'
    + '  </div>'
    + '</div>';

  // 请求数据
  function getMessage(cb) {
    $.get(url, function (data) {
      cb(data);
    })
  }

  // 获取消息
  getMessage(function (data) {
    var count = data.result.messages.length;
    s.container.find('.message-num').text(count);
  });

  // 打开消息列表
  s.container.click(function () {
    getMessage(function (data) {

      // 生成消息列表
      s.data = data.result;
      var messagesSlice = s.data.messages.slice(0, 10);
      var render = template.compile(messageSource);
      var html = render({messages: messagesSlice});
      $('body').append(html);

      // 关闭弹窗
      $('.message-header-close').click(function () {
        $('.message-layout-wrap').remove();
      });

      // 查看信息
      readDetail('message-more', data)


      // 查看更多
      $('.more').click(function () {
        $('.message-layout-wrap').remove();
        getMessage(function (data) {
          // 生成消息列表
          var render = template.compile(moreSource);
          var html = render();
          $('body').append(html);

          // 调用消息列表
          paginationNick({
            paginationBox: 'pagination-nick',//分页容器--必填
            mainBox: 'more-content',//内容盒子--必填
            numBtnBox: 'num-box-nick',//数字按钮盒子-- 必填
            btnBox: 'btn-box-nick',//按钮盒子 --必填
            ipt: 'page-ipt-nick',//input class-- 必填
            goBtn: 'go-btn-nick',//go btn class --必填
            currentBtn: 'active-nick'//当前按钮class name --必填
          });

          // 关闭消息详情
          $('.more-close').click(function () {
            $('.more-layout-wrap').remove();
          });

        })
      })
    })
  });

  // 消息列表
  function paginationNick(opt) {
    // 参数设置
    var pager = {
      paginationBox: '',//分页容器-- 必填
      mainBox: '',//内容盒子--必填
      numBtnBox: '',//数字按钮盒子-- 必填
      btnBox: '',//按钮盒子 --必填
      ipt: '',//input class-- 必填
      goBtn: '',//go btn class --必填
      currentBtn: '',//当前按钮class name --必填
      pageCount: 5,//每页显示几条数据
      numBtnCount: 3,//当前页左右两边各多少个数字按钮
      currentPage: 0,//当前页码data-page，首屏默认值
      maxCount: 0//ajax请求数据分成的最大页码
    };
    pager = $.extend(pager, opt);
    //请求数据页面跳转方法
    function goPage(btn) {
      getMessage(function (data) {
        var obj = data.result;
        //将展示的数据赋值给pager.data  (array)
        pager.data = obj.messages;

        //设置ajax请求数据分成的最大页码
        pager.maxCount = pager.data.length % pager.pageCount ? parseInt(pager.data.length / pager.pageCount) + 1 :
          pager.data.length / pager.pageCount;

        //设置当前页码
        if (!isNaN(btn)) {//数字按钮
          pager.currentPage = parseInt(btn);
        } else {
          switch (btn) {
            case 'first':
              pager.currentPage = 0;
              break;
            case 'prev':
              if (pager.currentPage > 0) {
                --pager.currentPage;
              }
              break;
            case 'next':
              if (pager.currentPage + 1 < pager.maxCount) {
                ++pager.currentPage;
              }
              break;
            case 'last':
              pager.currentPage = pager.maxCount - 1;
              break;
          }
        }
        //创建数字按钮
        createNumBtn(pager.currentPage);
        //赋值给页码跳转输入框的value，表示当前页码
        $('.' + pager.btnBox + ' .' + pager.ipt).val(pager.currentPage + 1);
        //内容区填充数据
        var arr = [], str = '';
        arr = pager.data.slice(pager.pageCount * pager.currentPage,
          pager.data.length - pager.pageCount * (pager.currentPage + 1) > -1 ?
            pager.pageCount * (pager.currentPage + 1) : pager.data.length);
        arr.forEach(function (v) {

          str += '<li>' + v.detail + '<div class="detail-btn">' + v.time + ' <span class="split-line">|</span> <button class="show-more" data-id="' + v.caseId + '">查看详情</button></div></li>';
        });
        $('.' + pager.mainBox).html(str);

        // 跳转到查看详情
        readDetail('show-more', data)

      })
    }

    //创建非数字按钮和数据内容区
    function createOtherBtn() {
      $('.' + pager.paginationBox).html('<ul class="' + pager.mainBox + '"></ul><div class="' + pager.btnBox + '"><button data-page="first" class="first-btn">首页</button><button data-page="prev" class="prev-btn">上一页</button><span class="' + pager.numBtnBox + '"></span><button data-page="next" class="next-btn">下一页</button><input type="text" placeholder="请输入页码" class="' + pager.ipt + '"><button class="' + pager.goBtn + '">确定go</button><button data-page="last" class="last-btn">尾页</button></div>');
      //ipt value变化并赋值给go btn data-page
      $('.' + pager.btnBox + ' .' + pager.ipt).change(function () {
        if (!isNaN($(this).val())) {//是数字
          if ($(this).val() > pager.maxCount) {//限制value最大值，跳转尾页
            $(this).val(pager.maxCount);
          }
          if ($(this).val() < 1) {//限制value最小值，跳转首页
            $(this).val(1);
          }
        } else {//非数字清空value
          $(this).val('');
        }
        $('.' + pager.btnBox + ' .' + pager.goBtn).attr('data-page', $(this).val() ? $(this).val() - 1 : '');
      });
      //每个btn绑定请求数据页面跳转方法
      $('.' + pager.btnBox + ' button').each(function (i, v) {
        $(this).click(function () {
          //有值且不是上一次的页码时才调用
          if (v.getAttribute('data-page') && v.getAttribute('data-page') != pager.currentPage) {
            goPage(v.getAttribute('data-page'));
          }
        });
      });
    }

    //创建数字按钮
    function createNumBtn(page) {
      //page是页面index从0开始，这里的page加减一要注意
      var str = '';
      if (pager.maxCount > pager.numBtnCount * 2) {//若最大页码数大于等于固定数字按钮总数（pager.numBtnCount*2+1）时
        //此页左边右边各pager.numBtnCount个数字按钮
        if (page - pager.numBtnCount > -1) {//此页左边有pager.numBtnCount页 page页码从0开始
          for (var m = pager.numBtnCount; m > 0; m--) {
            str += '<button data-page="' + (page - m) + '">' + (page - m + 1) + '</button>';
          }
        } else {
          for (var k = 0; k < page; k++) {
            str += '<button data-page="' + k + '">' + (k + 1) + '</button>';
          }
        }
        str += '<button data-page="' + page + '" class="' + pager.currentBtn + '" disabled="disabled">' + (page + 1) + '</button>';//此页
        if (pager.maxCount - page > 3) {//此页右边有pager.numBtnCount页 page页码从0开始
          for (var j = 1; j < pager.numBtnCount + 1; j++) {
            str += '<button data-page="' + (page + j) + '">' + (page + j + 1) + '</button>';
          }
        } else {
          for (var i = page + 1; i < pager.maxCount; i++) {
            str += '<button data-page="' + i + '">' + (i + 1) + '</button>';
          }
        }
        /*数字按钮总数小于固定的数字按钮总数pager.numBtnCount*2+1时，
         这个分支，可以省略*/
        if (str.match(/<\/button>/ig).length < pager.numBtnCount * 2 + 1) {
          str = '';
          if (page < pager.numBtnCount) {//此页左边页码少于固定按钮数时
            for (var n = 0; n < page; n++) {//此页左边
              str += '<button data-page="' + n + '">' + (n + 1) + '</button>';
            }
            str += '<button data-page="' + page + '" class="' + pager.currentBtn + '" disabled="disabled">' + (page + 1) + '</button>';//此页
            for (var x = 1; x < pager.numBtnCount * 2 + 1 - page; x++) {//此页右边
              str += '<button data-page="' + (page + x) + '">' + (page + x + 1) + '</button>';
            }
          }
          if (pager.maxCount - page - 1 < pager.numBtnCount) {
            for (var y = pager.numBtnCount * 2 - (pager.maxCount - page - 1); y > 0; y--) {//此页左边
              str += '<button data-page="' + (page - y) + '">' + (page - y + 1) + '</button>';
            }
            str += '<button data-page="' + page + '" class="' + pager.currentBtn + '" disabled="disabled">' + (page + 1) + '</button>';//此页
            for (var z = page + 1; z < pager.maxCount; z++) {//此页右边
              str += '<button data-page="' + z + '">' + (z + 1) + '</button>';
            }
          }
        }
      } else {
        str = '';
        for (var n = 0; n < page; n++) {//此页左边
          str += '<button data-page="' + n + '">' + (n + 1) + '</button>';
        }
        str += '<button data-page="' + page + '" class="' + pager.currentBtn + '" disabled="disabled">' + (page + 1) + '</button>';//此页
        for (var x = 1; x < pager.maxCount - page; x++) {//此页右边
          str += '<button data-page="' + (page + x) + '">' + (page + x + 1) + '</button>';
        }
      }

      $('.' + pager.numBtnBox).html(str);

      //每个btn绑定请求数据页面跳转方法
      $('.' + pager.numBtnBox + ' button').each(function (i, v) {
        $(this).click(function () {
          goPage(v.getAttribute('data-page'));
        });
      });

      //按钮禁用
      $('.' + pager.btnBox + ' button').not('.' + pager.currentBtn).attr('disabled', false);
      if (!page) {//首页时
        $('.' + pager.btnBox + ' .first-btn').attr('disabled', true);
        $('.' + pager.btnBox + ' .prev-btn').attr('disabled', 'disabled');
      }
      if (page === pager.maxCount - 1) {//尾页时
        $('.' + pager.btnBox + ' .last-btn').attr('disabled', true);
        $('.' + pager.btnBox + ' .next-btn').attr('disabled', true);
      }
    }

    //首屏加载
    createOtherBtn();//首屏加载一次非数字按钮即可
    goPage();//请求数据页面跳转满足条件按钮点击都执行，首屏默认跳转到currentPage
  }

  // 查看详情
  function readDetail(className, data) {
    $('.' + className).click(function () {
      // 获取消息id
      var caseId = $(this).attr('data-id');

      // 消息未读变为已读状态
      $(this).parent().addClass('read');

      // 数据库更新消息状态
      $.post(updateUrl, {"caseId": caseId, "isRead": true}, function (result) {
        console.log('success');
      });
      var obj = data.result;
      var messages = obj.messages
      // 消息详情
      for (var i in messages) {
        if (caseId === messages[i].caseId) {
          var item = messages[i];
          var detailRender = template.compile(messageDetail);
          var detailHtml = detailRender({item: item});
          $('body').append(detailHtml);

          // 关闭消息
          $('.message-detail-close').click(function () {
            $('.message-detail-wrap').remove();
          })
        }
      }
    })
  }
}
